<template>
	<view class="massoil">
		<view class="head">
			<view class="headleft" @click="() => show = true">
				{{you}} ▼
			</view>
			<!-- <view class="headright">
				<image src="../../static/dingdan.png" mode="" @click="jump()">
				</image>
			</view> -->
		</view>
		<!-- <scroll-view  scroll-y="true" style="position: relative;margin-top: 60upx;height: 100vh;background-color: #007AFF;"> -->
		<view class="oils" v-for="(item,index) in oillists">
			<view class="imgs">
				<image :src="item.gasLogoSmall" mode="aspectFit">
				</image>
			</view>
			<view class="texts">
				<view class="oilname" style="">{{item.gasName}}</view>
				<view class="adds" style="">{{item.gasAddress}}</view>
				<view class="bottoms">
					<view class="bottoms_left">
						<view class="price">国标价<text>￥</text>{{item.priceOfficial}}</view>
						<view class="vipprice"><text class="vipprice_left">加油价</text><text
								class="vipprice_center">￥</text><text
								class="vipprice_right">{{Number(item.priceY || 0)}}</text>
						</view>
					</view>
					<view class="bottoms_right">
						<button class="bottoms_right_button" @click="gasid(item)">加油</button>
					</view>
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->

		<u-picker :show="show" :columns="columns" keyName="label" :closeOnClickOverlay='true' @cancel='() => show = false' @confirm = "hao"></u-picker>
		
		<u-back-top :scroll-top="scrollTop"></u-back-top>

	</view>
</template>

<script>
	import {
		oillist,
		getuser
	} from '@/api/oil'
	export default {
		data() {
			return {
				scrollTop: 0,
				you: '92#',
				show: false,
				columns: [
					[{
						label: '92#',
						// 其他属性值
						id: 92
						// ...
					}, {
						label: '95#',
						id: 95
					}, {
						label: '98#',
						id: 98
					}]
				],
				bgColor: '#fe3d48',
				oilitem: {
					oilNo: '92',
					pageSize: '10',
					pageIndex: '1',
					userLatStr: '', //用户地点纬度
					userLngStr: '', //用户地点经度
				},
				oillists: [],
				urls: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
			}
		},
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		onReachBottom() {
			console.log("记载")
			this.oilitem.pageIndex++;
			this.oillist()
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: './massList'
			})
		},
		onLoad() {
			// let _that = this;
			// // _that.oillist()
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		// console.log(res)
			// 		_that.oilitem.userLatStr = res.latitude;
			// 		_that.oilitem.userLngStr =  res.longitude;
					
			// 		// console.log('当前位置的经度：' + res.longitude,_this.oilitem.userLatStr);
			// 		// console.log('当前位置的纬度：' + res.latitude,_this.oilitem.userLngStr);
			// 		_that.oillist()
			// 	},
			// 	fail() {
			// 		console.log("000000000000000")
			// 	}
			// });
			console.log(uni.getStorageSync('token'))
			this.getuser();
		},
		methods: {
			getuser(){
				getuser().then(res => {
					console.log(res)
					if(res.code == 200){
						let _that = this;
						// _that.oillist()
						uni.getLocation({
							type: 'wgs84',
							success: function(res) {
								// console.log(res)
								_that.oilitem.userLatStr = res.latitude;
								_that.oilitem.userLngStr =  res.longitude;
								
								// console.log('当前位置的经度：' + res.longitude,_this.oilitem.userLatStr);
								// console.log('当前位置的纬度：' + res.latitude,_this.oilitem.userLngStr);
								_that.oillist()
							},
							fail() {
								console.log("000000000000000")
							}
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			hao(e){
				this.oilitem.oilNo = e.value[0].id;
				this.you = e.value[0].label;
				this.oillists = []
				this.oilitem.pageIndex =  '1',
				this.oillist()
				this.show = false;
			},
			oillist() {
				// this.oilitem.userLatStr = 39.92484202130344;
				// this.oilitem.userLngStr = 116.378511;
				// console.log("Ceshi")
				console.log(this.oilitem.userLatStr,this.oilitem.userLngStr)
				console.log(this.oilitem)
				oillist(this.oilitem).then(res => {
					console.log(res)
					// if (res.result.gasInfoList.length != 0) {
					if (res.length != 0) {
						for (let s1 in res) {
							this.oillists.push(res[s1]);
						}
					}
					else{
						this.goods.pageNum--;
						uni.showToast({
							title: '无更多商品',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					this.oilitem.pageIndex--;
					console.log(res)
				})

			},
			gasid(item) {
				console.log(item)
				uni.navigateTo({
					url: './orderConfirm?id=' + item.gasId
				})
			},
			jump() {
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.massoil {
		overflow: hidden;
		// padding: ;

		.oils {
			// display: flex;
			// margin-top: 20upx;
			// background-color: #ffffff;
			// border-radius: 14upx;
			// align-items: center;
			// padding: 20upx;
			
			display: flex;
			margin: 0 32upx 20upx 32upx;
			background-color: #ffffff;
			border-radius: 14upx;
			align-items: center;
			padding: 20upx;

			.imgs {
				width: 232upx;
				// width: 40%;
				height: 232upx;
				// height: 100%;
				border-radius: 12upx;
				font-size: 0;
				display: table-cell;
				vertical-align: middle;
				image {
					max-width: 100%;
					max-height: 100%;
					display: block;
					margin: auto;
				}
			}

			.texts {
				width: calc(100% - 36upx - 232upx);
				margin-left: 36upx;

				.oilname {
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.adds {
					min-height: 68upx;
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 34upx;
					margin-top: 10upx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.bottoms {
					display: flex;
					align-items: flex-end;
					margin-top: 28upx;
					justify-content: space-between;
					.bottoms_left {
						.price {
							vertical-align: middle;
							font-size: 22upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.5);
							line-height: 32upx;

							text {
								margin-left: 6upx;
								margin-right: 10upx;

							}
						}

						.vipprice {
							display: flex;
							align-items: center;

							.vipprice_left {
								font-size: 22upx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: rgba(0, 0, 0, 0.9);
								line-height: 32upx;
							}

							.vipprice_center {
								font-size: 18upx;
								color: #ED2525;
								margin: 0 6upx;
							}

							.vipprice_right {
								font-size: 36upx;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #ED2525;
								line-height: 50upx;
							}
						}
					}

					.bottoms_right {
						.bottoms_right_button {
							width: 140upx;
							height: 58upx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 34upx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							line-height: 48upx;
							background-color: #ED2525;
							border-radius: 20upx;

							&::after {
								display: none;
							}
						}
					}
				}
			}
		}

		/deep/ .u-icon {
			.u-icon__icon {
				color: #fff !important;
			}
		}

		/deep/ .u-navbar__content__title {
			color: #FFFFFF !important;
		}
	}
	
	.head{
		// position: fixed;
		// width: 100%;
		// z-index: 100;
		// display: flex;
		background-color: #fe3d48;
		text-align: center;
		color: #FFFFFF;
		width: 100%;
		// .headleft{
		// 	width: calc(100% - 50upx);
		// 	color: #FFFFFF;
		// 	display: flex;
		// 	margin-left: 60upx;
		// }
		// .headright{
		// 	width: 50upx;
		// 	height: 50upx;
		// 	border-radius: 12upx;
		// 	font-size: 0;
		// 	margin-right: 36upx;
		// 	image{
		// 		font-size: 0;
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }
	}











	.oilbtn {}
</style>
<style>
	page {
		background-color: #e4e6e9;
	}
</style>
